<template>
  <div class="TopRankingList">
    <img :src="artistToplist.coverUrl" alt="" />
    <div class="TopT">
      <svg
        class="icon"
        aria-hidden="true"
        @click="$store.commit('rankinglist/ISRANKINGLIST', false)"
      >
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <span style="color: #999">排行榜</span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-youcecaidan"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { reactive, computed, toRefs } from "vue";

export default {
  setup() {
    //vuex
    let { state } = useStore();
    //数据
    let states = reactive({
      artistToplist: computed(() => state.rankinglist.artistToplist),
      LIST: computed(() => {
        let list = state.rankinglist.LIST;
        return list.splice(0, 3);
      }),
    });

    return {
      ...toRefs(states),
    };
  },
};
</script>

<style lang='less' scoped>
.TopRankingList {
  position: relative;
  width: 100%;
  height: 4rem;
  img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0.2rem 0.2rem;
  }
  .TopT {
    position: fixed;
    display: flex;
    width: 100%;
    height: 0.8rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.04rem 0.1rem;
    .icon {
      fill: #fff;
    }
  }
}
</style>